<template>
	<view>
		
		<!-- 顶部选项卡 -->
		<scroll-view
		scroll-x 
		class="scroll-row" 
		:scroll-into-view="scrollInto"
		scroll-with-animation 
		style="height: 100rpx;">
			<view 
			v-for="(item,index) in tabBars" 
			:key="index" 
			class="scroll-row-item px-5 py-2" 
			:id="'tab'+index" 
			:class="tabIndex===index ? 'text-main font-lg font-weight-bold' : ''" 
			@click="changeTab(index)">
				{{item.name}}
			</view>
		</scroll-view>
		<swiper :duration="150"
		:current="tabIndex" 
		@change="onChangeTab" 
		:style="'height:'+scrollH+'px;'">
			<swiper-item 
			v-for="(item,index) in topicList" 
			:key="index">
				<scroll-view 
				scroll-y="true" 
				:style="'height:'+scrollH+'px;'" 
				@scrolltolower="loadmoreEvent(index)">
					<!-- 列表样式 -->
					<template v-if="item.list.length>0">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<topic-list :item="item2" :index="index2"></topic-list>
							<divider></divider>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="loadmore"></load-more>
					</template>
					<template v-else>
						<no-thing></no-thing>
					</template>
					
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
	</view>
</template>

<script>
	import topicList from '@/components/news/topic-list.vue';
	import loadMore from '@/components/common/load-more.vue';
	import {getTopicNav} from "@/network/topic.js";
	
	export default {
		components: {
			topicList,
			loadMore
		},
		data() {
			return {
				// 列表高度
				scrollH:600,
				// 顶部选项卡
				scrollInto:"",
				loadmore:"上拉加载更多",
				tabIndex:0,
				tabBars: [{
					name:"关注",
				},{
					name:"推荐",
				},{
					name:"体育",
				},{
					name:"热点",
				},{
					name:"财经",
				},{
					name:"娱乐",
				}],
				topicList:[],

			}
		},
		// 监听点击导航栏搜索框
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search',
			})
		},
		// 监听导航按钮点击事件
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../add-input/add-input',
			})
		},
		onLoad() {
			uni.getSystemInfo({
				success:res=>{
					this.scrollH = res.windowHeight - uni.upx2px(101)
				}
			})
			this.getData()
			
		},
		methods: {
			
			// 监听滑动
			onChangeTab(e){
				this.changeTab(e.detail.current)
			},
			// 切换选项
			changeTab(index){
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index
				// 滚动到指定元素
				this.scrollInto = 'tab'+index
			},
			// 上拉加载更多
			loadmoreEvent(index){
				// 拿到当前列表
				let item = this.loadmore
				// 判断是否处于可加载状态（上拉加载更多）
				if (item !== '上拉加载更多') return;
				this.loadmore = '加载中...'
				// 修改当前列表加载状态
				setTimeout(()=>{
					this.topicList[index].list = [...this.topicList[index].list,...this.topicList[index].list]
					this.loadmore = '上拉加载更多'
				},2000)
			},
			getData(){
				getTopicNav().then(attr=>{
					let [err,res] = attr
					this.topicList = res.data.topic_list
					this.tabBars = res.data.tabBars
				})
			},
		}
	}
</script>

<style>
	
</style>
